<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>姓名案例_插值语法</title>
        <script
            type="text/javascript"
            src="../vue.js"
        ></script>
    </head>
    <body>
        <div class="p">
            姓：<input type="text" v-model="firstName"><br/><br>
            名：<input type="text " v-model="lastName"><br><br>
            全名：<span>{{firstName.slice(0,3)}} - {{lastName}}</span>
        </div>


        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm = new Vue({
                data() {
                    return {
                        firstName: '张',
                        lastName: '三'
                    }
                },
                methods: {}
            })
            vm.$mount(".p");
        </script>
    </body>
</html>